<template>
	<div class="pressList">
		<div class="handel">
			<el-checkbox></el-checkbox>
			<el-button>删除</el-button>
			<el-button>导出</el-button>
			<el-button>标记已阅</el-button>
			<div class="handel-right">
				<el-dropdown>
				  <el-button type="">
				    选择条数<i class="el-icon-caret-bottom el-icon--right"></i>
				  </el-button>
				  <el-dropdown-menu slot="dropdown">
				    <el-dropdown-item>50</el-dropdown-item>
				    <el-dropdown-item>100</el-dropdown-item>
				    <el-dropdown-item>200</el-dropdown-item>
				  </el-dropdown-menu>
				</el-dropdown>
				<el-button>刷新</el-button>
			</div>
		</div>
		<div class="pressContent" v-for="(l,index) in 10">
			<div class="pressCheck">
				<el-checkbox></el-checkbox>
				<div class="index">{{index+1}}</div>
			</div>
			<div class="pressbody">
				<div class="body-item">
					<div class="img-text">
						<div>
							<img src="./img/default.png" alt="#">
							<span class="com">南京 晨报</span>
						</div>
					</div>
					<div class="wrapper">
						<div class="head">
							<div class="left">
								<label>转发数: <span>522</span></label>
								<label>评论数: <span>522</span></label>
								<label>点赞数: <span>522</span></label>
							</div>
							<div class="right">
								<div class="read">
									<img src="./img/read.png" alt="">
								</div>
								<div class="tend">倾向性：<TendLabel :tend='1'></TendLabel></div>
							</div>
						</div>
						<div class="body">
							<p><span>【暑假过半，安全还是第一哦】</span>
								实在没办法需要独留儿童在车内一定要打开窗户。此外，对比较懂事的孩子，家长应教孩子不要随便按车上的按钮，以免不小心将自己锁在车内；如果是电子锁的车或者孩子太小，无法打开车门，则可以教他们按车喇叭，以引起路人注意以便施救。
							</p>
							<div v-show="index==1" class="imgs">
								<img src="./img/body.png" alt="#">
								<img src="./img/body.png" alt="#">
								<img src="./img/body.png" alt="#">
								<img src="./img/body.png" alt="#">
								<img src="./img/body.png" alt="#">
								<img src="./img/body.png" alt="#">
								<img src="./img/body.png" alt="#">
							</div>
							<div v-show="index!=1" style="height:20px"></div>
						</div>
					</div>
			        </div>
					 <div class="imgbtns">
			          <div class="imgbtn"><i class="fa fa-bookmark"></i>加入素材库</div>
			          <div class="imgbtn"><i class="fa fa-eye"></i>标记为已阅</div>
			          <div class="imgbtn"><i class="fa fa-trash"></i>删除</div>
			          <div class="kwds">关键词：
			            <span class="kwd" v-for="l in 3">安全</span>
			          </div>
				</div>
			</div>
			<div  class="timedate">
				<div>
					<div  class="date">2016-06-08</div> 
					<div class="time">03:11:15</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	import TendLabel from 'components/common/TendLabel'
	export default{
		name:'pressList',
		components:{TendLabel}
	}
</script>
<style scoped>
	.pressList{
		background: #fff;
		min-height: 100%;
		-webkit-font-smoothing:antialiased;
	}
	.pressList .handel{
		height: 3.75rem;
		background: #f6f6f6;
		padding-left: 2.18rem;
		line-height: 3.75rem;
		border-bottom: 1px solid #dcdcdc;
	}
	.pressList .handel .el-checkbox{
		margin-right: 4.38rem;
	}
	.pressList .handel  button{
		height: 2.18rem;
		padding: 0 1.56rem;
	}

	.pressList .handel .handel-right{
		float: right;
		padding-right: 1.75rem;
	}
	.pressList .pressContent{
		display: flex;
		width: 100%;
		border-bottom: 1px solid #dcdcdc;
		overflow: hidden;
	}
	.pressList .pressContent .pressCheck{
		position: relative;
		width: 6.25rem;
		flex:0 0 6.25rem;
		border-right: 1px solid #dcdcdc;
		text-align: center;
	}
	.pressList .pressContent .pressCheck .el-checkbox{
		margin-top: 1.25rem;
	}
	.pressList .pressContent .pressCheck .index{
		margin-top: 1.87rem;
		font-size: 0.88rem;
		color: #1b1b1b;
	}
	.pressList .pressContent .pressCheck .fresh{
		position: absolute;
		top: 0;
		left: 0;
		width: 3.25rem;
		height: 2.93rem;
		background: url(./img/fresh.png) no-repeat;
	}
	.pressList .pressContent .pressCheck .star{
		position: absolute;
		width: 4.31rem;
		height: 3.87rem;
		top: 50%;
		right: -4px;
		background: url(./img/star.png) no-repeat;
	}
	.pressList .pressContent .pressbody{
		flex:1;
	}
	.pressList .pressContent .pressbody .body-item{
		display: flex;
		border-bottom: 1px solid #dcdcdc;
	}
	.pressList .pressContent .pressbody .img-text{
		position: relative;
		text-align: center;
		width: 10rem;
		flex:0 0 10rem;
		border-right: 1px solid #dcdcdc;
	}
	.pressList .pressContent .pressbody .img-text>div{
		position: absolute;
		top: 50%;
		left: 50%;
		transform:translate(-50%,-50%);
	}
	.pressList .pressContent .pressbody .img-text img{
		width: 3.75rem;
		height: 3.75rem;
		border-radius: 50%;
		border: 1px solid #dcdcdc;
	}
	.pressList .pressContent .pressbody .img-text span{
		margin-top: 0.75rem;
		display: block;
		font-size: 0.88rem;
		color: #000;
	}
	.pressList .wrapper{
		padding: 0 1.56rem;
	}
	.pressList .wrapper .head{
		height: 3.75rem;
		line-height: 3.75rem;
		display: flex;
		overflow: hidden;
	}
	.pressList .wrapper .head .left{
		float: left;
		width: 31.25rem;
	}
	.pressList .wrapper .head .left label{
		font-size: 0.88rem;
		color: #959595;
		margin-right: 2.5rem;
	}
	.pressList .wrapper .head .left label span{
		color: #000;
		font-family: consolas;
	}
	.pressList .wrapper .head .right{
		flex:1;
		float: right;
		display: flex;
		justify-content: space-between;
	}
	.pressList .wrapper .head .right .tend{
		font-size: 0.88rem;
	}
	.pressList .wrapper .head .right .tend-label-root{
		margin-top: 0.81rem;
	}
	.pressList .wrapper .head .right .read{
		margin-left: 20%;
		display: inline-block;
		transform:translateY(-45%);

	}
	.pressList  .wrapper p{
		font-size: 0.88rem;
		color: #666666;
		line-height: 1.25rem;
		margin: 0.32rem
	}
	.pressList  .wrapper p span{
		color: #313131;
	}
	.pressList  .wrapper .imgs{
		height: 7.5rem;
		margin-bottom: 0.625rem;
		overflow: hidden;
		-webkit-column-width: 10.6rem;
	    -moz-column-width: 10.6rem;
	    -webkit-column-gap: 0.4rem;
	    -moz-column-gap: 0.4rem;
	}
	.pressList .imgbtns{
		height: 2.2rem;
	    margin-top: 0.6rem;
	    white-space: nowrap;
	    overflow: hidden;
	    float: right;
	    margin-right: 1rem;
	}
	.pressList .imgbtns .imgbtn{
		color: #666;
	    font-size: 0.88rem;
	    display: inline-block;
	    cursor: pointer;
	    width: 10vw;
	    min-width: 8rem;
	    text-align: center;
	    border-right: 1px solid #dcdcdc;
	    line-height: 1.4rem;	
	}
	.pressList .imgbtns .imgbtn .fa{
		margin-right: 0.6rem;
	}
	.pressList .imgbtns .kwds{
	    display: inline-block;
	    padding-left: 2rem;
	    color: #666;
	    font-size: 14px;
	}
	.pressList .imgbtns .kwds .kwd{
		margin-right: 0.3rem;
	    color: #ff1e00;
	}
    .pressList .timedate{
    	position: relative;
    	border-left: 1px solid #dcdcdc;
	    width: 9rem;
	    font-size: 0.88rem;
	    font-family: consolas;
    }
    .pressList .timedate >div{
    	position: absolute;
    	top: 50%;
    	width: 100%;
    	transform:translatey(-50%);
    }
    .pressList .timedate .date,.pressList .timedate .time{
    	display: block;
    	text-align: center;
    }

</style>